<script setup >
import Breadcrumb from "@/components/Breadcrumb .vue";
import {getSubCategoryAPI} from '@/api/catorgre/index.js'
import {getSubProductAPI} from "@/api/catorgre/index.js";
import {ref,onMounted,onBeforeUnmount} from "vue";
import {useRoute} from "vue-router";
import Goods from "@/components/Goods.vue";
const route = useRoute();
const subCategoryData = ref([])
//获取子分类
const getSubCategory = async ()=>{
   const res =  await getSubCategoryAPI(route.params.id)
  console.log(res)
  subCategoryData.value = res.result;
}
//选中的tab
const activeName = ref('first')
//获取商品的参数
const dataProduct = ref({
  categoryId: subCategoryData.value.parentId,
  page:1,
  pageSize:20,
  sortField: activeName.value
})
const subProductData = ref([])
const productList = ref([])
// 获取商品数据
const getSubCateProduct = async (data)=>{
  const res = await getSubProductAPI(data)
  subProductData.value  = res.result
}
//tab点击事件
const handleClick = async ()=>{
  productList.value = [];
  dataProduct.value.page = 1;
  await getSubCateProduct(dataProduct.value)
  productList.value = subProductData.value.items
}
//节流定时器
  let timer = null;
//下拉触底时加载剩余·商品
const listenerScroll = async ()=>{
  // console.log(window.pageYOffset,window.innerHeight,document.body.clientHeight)
  if((window.pageYOffset + window.innerHeight  >= (document.body.clientHeight -700)) && !timer){
    //节流
    timer = setTimeout(()=>{
      clearTimeout(timer)
      timer = null
    },2000)
    if (dataProduct.value.page >= subProductData.value.pages) return; //如果页码大于总页数，则不发送请求
    dataProduct.value.page++
    const res = await getSubProductAPI(dataProduct.value)
    console.log('这个res:',res)
    productList.value = productList.value.concat(res.result.items)
  }
}
 window.addEventListener('scroll',listenerScroll)
//回到顶部
function backTop(){
  window.scrollTo({
    top:0,
    behavior:'smooth'
  })
}
onMounted(async ()=>{
  await getSubCategory()
  await getSubCateProduct(dataProduct.value)
  productList.value = subProductData.value.items
})
onBeforeUnmount(()=>{
  window.removeEventListener('scroll',listenerScroll)
})
 </script>

<template>
  <div class="subCategory">
<!--    面包屑-->
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: `/category/${subCategoryData.parentId}` }">{{ subCategoryData?.parentName }}
      </el-breadcrumb-item>
      <el-breadcrumb-item> {{ subCategoryData?.name }} </el-breadcrumb-item>
    </el-breadcrumb>

<!--    商品   -->
   <div class="product">
      <!-- 排序 -->
     <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
       <el-tab-pane label="最新商品" name="first">
         <goods :goods="productList"/>
       </el-tab-pane>
       <el-tab-pane label="最高人气" name="second">
         <goods :goods="productList"/>
       </el-tab-pane>
       <el-tab-pane label="最高评论" name="third">
         <goods :goods="productList"/>
       </el-tab-pane>
     </el-tabs>
   </div>

<!--    回到顶部-->
    <div class="backTop" @click="backTop">
      ⬆
    </div>
  </div>
</template>


<style lang="less" scoped>
.subCategory{
  width: 70vw;
  margin: 20px auto;
}
.product{
  margin-top: 20px;
}
.backTop{
  width: 80px;
  height: 80px;
  background: #27C0C5;
  position: fixed;
  bottom: 40px;
  right: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4em;
  border-radius: 50%;
}
</style>